Alternatives to Pagination on Product-Listing Pages 商品列表頁面的分頁替代方案
1. 傳統分頁與適用場景
傳統分頁將商品分成多個頁面，使用者需透過“下一頁”按鈕或數字導航檢視更多內容。這種設計在商品數量龐大的情況下非常實用，例如：
Amazon 使用傳統分頁，提供清晰的導航方式，讓使用者在海量商品中精確定位。
小型商品目錄 或 載入效能良好 的網站可以選擇一次性載入所有商品，避免分頁的額外操作。
2. 無限載入 Infinite Loading
適用於：每頁商品數量較少（通常少於40個）。提供強大的篩選功能，幫助使用者縮小搜尋範圍。展示明確的商品總數，例如“42件商品”。
優勢：減少使用者互動成本：使用者可以連續滾動瀏覽，無需手動點選分頁按鈕。
快速體驗：當載入速度快時，使用者感知的等待時間會很短。
頁尾不可達：使用者滾動到頁面底部時，頁尾不斷被推遠，可能導致無法訪問重要資訊（如退貨或運費政策）。
迷失方向：對於商品數量較多的頁面，使用者可能不清楚已瀏覽和剩餘商品的數量，失去上下文感知。
3 訪問頁尾導航 Access to Footer Navigation
因為一旦使用者滾動到頁面底部，新的專案通常會自動追加，所以使用者無法到達頁尾區域。使用無限滾動的網站常常讓使用者感到沮喪，因為每次他們試圖導航到頁尾時，頁尾都會不斷地被推離頁面
4 產品數量 Number of Products
如果在一個頁面上審查一個類別內的所有專案是不合理的，那麼提供無限滾動也是不合理的。
提供商品總數和載入進度：
優勢：
可控載入：使用者可以根據需要載入更多商品，避免因頁面過長而喪失對列表的控制。
頁尾可達：與無限載入不同，使用者可以輕鬆訪問頁面底部資訊。
儲存使用者瀏覽位置：當使用者從商品詳情頁返回時，應回到之前的瀏覽位置。
避免大規模商品目錄使用無限載入：當需要瀏覽的商品超出單頁合理數量時，建議使用其他模式。
5 “顯示更多”按鈕（Show More Buttons）
中小型商品目錄，使用者可以快速瀏覽所有商品。移動端場景，使用者可以控制流量消耗，避免不必要的自動載入。
- See More 看見更多
- Load More 載入更多
- View More Products 檢視更多產品
提供關鍵資料：例如，
- The total number of items in the set
該集合中專案的總數
- How many products have been loaded
有多少產品已被裝載
- How many products remain to be loaded in the set
在該集合中還有多少產品有待裝載
6. 保持使用者瀏覽位置（Save the Shopper’s Spot）
無論採用何種滾動設計，列表頁面都需支援"反覆跳轉"功能——使用者從商品詳情頁返回列表時能回到原瀏覽位置，這在移動裝置和桌面端都很重要。
許多網站未能實現這一功能，導致使用者返回時需重新定位。這個問題在無限滾動和"顯示更多"設計中尤為明顯。
6. 結論（Conclusion）
選擇設計模式的建議：
商品數量較少或中等：可採用無限載入或“顯示更多”按鈕。
商品數量龐大：應使用傳統分頁以確保使用者能精準控制瀏覽過程。
關鍵設計要點：
提供商品總數和載入進度資訊。
支援使用者跳轉返回的瀏覽行為，儲存瀏覽位置。
確保頁尾資訊可訪問，避免因載入模式阻礙使用者獲取重要內容。
透過這些改進，可以最佳化使用者在商品列表頁的體驗，提升瀏覽效率，同時滿足不同場景下的需求。